<template>
  <div class="table">
    <top-search :num="num" :time="time.toString()" @paramsChange="paramsChange" :searchText="searchText" />
    <a-spin :spinning="loading">
      <el-row style="margin-top: 10px;">
        <left-pane :itemClick="leftHandler" :dataSource="leftDataSource" />
        <right-pane :dataSource="rightDataSource" />
      </el-row>
    </a-spin>
    <Pagination
      @pagination="paramsChange"
      background
      :autoScroll="false"
      layout="total, prev, pager, next"
      :total="total"
      :limit="params.pageSize"
    />
  </div>
</template>

<script>
  import TopSearch from './components/TopSearch'
  import LeftPane from './components/LeftPane'
  import RightPane from './components/RightPane'
  export default {
    name: 'index',
    components: {
      TopSearch,
      LeftPane,
      RightPane
    },
    data() {
      return {
        loading: false,
        num: 8,
        time: 0.03,
        params: {
          page: 1
        },
        total: 100,
        leftDataSource: [
          {
            title: '图书馆',
            data: [
              {
                label: '测试',
                value: 99
              }
            ]
          },
          {
            title: '办公室',
            data: [
              {
                label: '测试',
                value: 22
              }
            ]
          }
        ],
        rightDataSource: [{}, {}]
      }
    },
    props: {
      searchText: {
        type: String,
        default: ''
      }
    },
    methods: {
      paramsChange(e) {
        this.params = { ...this.params, ...e }
        if (this._timeId) clearTimeout(this._timeId)
        this.loading = true
        this._timeId = setTimeout(() => {
          this.loading = false
        }, 1000)
      },
      leftHandler(e) {
        console.log(e)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table {
    border: 1px solid #d8e2f0;
    padding: 23px 49px;
    background: #f7fafd;
    font-size: 14px;
    color: #333;
    padding-bottom: 120px;
  }
</style>
